<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态表格</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
<!--    多选按钮的宽度-->
    <style>
        .check{
            width: 100px;
        }
    </style>

    <script>
        //添加一行
        function addRow(){
            var tbodyElement = document.getElementsByTagName("tbody")[0];
            //获取最后一个id
            var tds = document.querySelectorAll("td");
            var idElement = tds[tds.length-5];
            var id = parseInt(idElement.innerHTML);

            //创建一行
            var trElement = document.createElement("tr");
            //多选框
            var tdElement = document.createElement("td");
            tdElement.innerHTML = '<input type="checkbox">';
            tdElement.className = "check";
            trElement.appendChild(tdElement);
            //编号
            tdElement = document.createElement("td");
            tdElement.innerHTML = id+1;
            trElement.appendChild(tdElement);
            //姓名
            tdElement = document.createElement("td");
            tdElement.innerHTML = document.getElementById("exampleInputName1").value;
            trElement.appendChild(tdElement);
            //性别
            tdElement = document.createElement("td");
            tdElement.innerHTML = document.getElementById("exampleInputName2").value;
            trElement.appendChild(tdElement);
            //年龄
            tdElement = document.createElement("td");
            tdElement.innerHTML = document.getElementById("exampleInputName3").value;
            trElement.appendChild(tdElement);
            //备注
            tdElement = document.createElement("td");
            tdElement.innerHTML = document.getElementById("exampleInputName4").value;
            trElement.appendChild(tdElement);
            tbodyElement.appendChild(trElement);
        }

        //全选
        function checkAll(hred){
           var inputs = document.getElementsByTagName("input");
            for (var i = 0; i < inputs.length; i++) {
                if (inputs[i].type == "checkbox"){
                    inputs[i].checked = hred.checked;
                }
            }
        }

        //删除选中
        function deleteByPitchOn(){
            var tbodyElement = document.getElementsByTagName("tbody")[0];
            var inputeElements = document.getElementsByTagName("input");
            for (var i = 0; i < inputeElements.length; i++) {
                //判断是多选框 并且 是选中状态  并且 表头不能删
                if (inputeElements[i].type == "checkbox" && inputeElements[i].checked && inputeElements[i] != document.getElementById("hred")){
                    tbodyElement.removeChild(inputeElements[i].parentNode.parentNode);
                    //删除一个tr节点 for循环判断条件数组长度会变 需要-1
                    i--;
                }
            }
        }
    </script>
</head>
<body>
    <h1 style="text-align: center">动态表格</h1>
<!--    表单-->
    <div class="container">
        <form class="form-inline">
            <div class="form-group">
                <label for="exampleInputName1">姓名</label>
                <input type="text" class="form-control" id="exampleInputName1" placeholder="请输入姓名">
            </div>
            <div class="form-group">
                <label for="exampleInputName2">性别</label>
                <input type="text" class="form-control" id="exampleInputName2" placeholder="请输入性别">
            </div>
            <div class="form-group">
                <label for="exampleInputName3">年龄</label>
                <input type="text" class="form-control" id="exampleInputName3" placeholder="请输入年龄">
            </div>
            <div class="form-group">
                <label for="exampleInputName4">备注</label>
                <input type="text" class="form-control" id="exampleInputName4" placeholder="可不填">
            </div>
            <div class="form-group">
                <input type="button" value="确定" class="btn btn-info" onclick="addRow()">
            </div>
        </form>
    </div>
    <hr>
    <div class="container">
        <input type="button" value="删除选中" class="btn btn-info" onclick="deleteByPitchOn()">
    </div>
    <div class="container">
<!--    表格-->
        <table class="table table-bordered table-hover table-striped table-condensed" id="table">
            <tr>
                <th class="check">
                    <input type="checkbox" onclick="checkAll(this)" id="hred">全选
                </th>
                <th>编号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>备注</th>
            </tr>
            <tr>
                <td class="check"><input type="checkbox"></td>
                <td>1</td>
                <td>张三</td>
                <td>男</td>
                <td>18</td>
                <td></td>
            </tr>
            <tr>
                <td class="check"><input type="checkbox"></td>
                <td>2</td>
                <td>李四</td>
                <td>男</td>
                <td>18</td>
                <td></td>
            </tr>
            <tr>
                <td class="check"><input type="checkbox"></td>
                <td>3</td>
                <td>王五</td>
                <td>男</td>
                <td>18</td>
                <td></td>
            </tr>
        </table>
    </div>

</body>
</html>